<template>
    <div class="body">
        <div class="body-top">
            <div class="body-top-title">
                <el-select v-model="station" placeholder="请选择" :popper-append-to-body="false" @change="changeStation">
                    <span slot="prefix">站点:</span>
                    <el-option v-for="item in stations" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </div>
        </div>
        <div class="body-content">
            <div class="body-content-top">
                <div class="body-content-top-left"><span>机器人</span></div>
                <div class="body-content-top-right"><span>实时视频</span></div>
            </div>
            <div class="body-content-bottom">
                <div class="body-content-bottom-left">
                    <div class="robot-info">
                        <div class="robot">
                            <el-select v-model="robot" placeholder="请选择" :popper-append-to-body="false"
                                @change="changeRobot">
                                <span slot="prefix">机器人：</span>
                                <el-option v-for="item in robots" :key="item.robotCode" :label="item.robotName"
                                    :value="item.robotCode" />
                            </el-select>
                        </div>
                        <div class="level">
                            <img src="/static/image/robot-battery-level.png" alt="机器人电量">
                            <span class="level-text">{{ Math.floor(robotCommonRealData.batteryPercent) }}%</span>
                        </div>
                        <div class="operation-btn">
                            <el-button @click="confirmDialog('pause')">暂停</el-button>
                            <el-button @click="confirmDialog('cancel')">取消</el-button>
                            <el-button @click="confirmDialog('continue')">恢复</el-button>
                            <el-button @click="confirmDialog('back')">返航</el-button>
                        </div>
                    </div>
                    <div class="patrol-info">
                        <div class="patrol-chart">
                            <div class="patrol"><span class="patrol-toatl">{{ taskCount.pointCount == null ?
                    0 : taskCount.pointCount }}</span><span class="patrol-title">巡视点位总数</span><img
                                    class="patrol-point-total" src="/static/image/patrol-point-total.png" alt="巡视点位总数">
                            </div>
                            <div class="patrol"><span class="patrol-count">{{ taskCount.allCount == null ?
                    0 : taskCount.allCount }}</span><span class="patrol-title">已巡视点位数</span><img
                                    class="patrol-point-count" src="/static/image/patrol-point-count.png" alt="已巡视点位数">
                            </div>
                            <div class="patrol"><span class="patrol-exception">{{ taskCount.alarmCount == null ?
                    0 : taskCount.alarmCount }}</span><span class="patrol-title">巡视异常数量</span><img
                                    class="patrol-exception-count" src="/static/image/patrol-exception-count.png"
                                    alt="巡视异常数量"></div>
                            <img class="base" src="/static/image/base.png" alt="底座">
                        </div>
                        <el-divider />
                        <div class="patrol-text">
                            <div class="patrol-content"><span>当前巡视任务:</span><span class="patrol-value">{{
                    taskCount.taskName
                }}</span></div>
                            <div class="patrol-content"><span>当前巡视点位:</span><span class="patrol-value">{{
                        taskCount.currentDevicePoint
                    }}</span></div>
                            <div class="patrol-content"><span>当前任务状态:</span><span class="patrol-value">{{
                        taskCount.taskStatusName
                    }}</span></div>
                        </div>
                    </div>
                    <div class="map-title"><span>地图线路</span></div>
                    <div class="map-img"><img v-if="mapUrl" :src="mapUrl" alt="地图线路"></div>
                </div>
                <div class="body-content-bottom-right">
                    <div class="body-content-bottom-right-video">
                        <iframe id="light" ref="light" class="light" marginwidth="0" marginheight="0" control=""
                            scrolling="auto" :src="currentAdvices[0].src" loading="lazy" />
                        <iframe id="infrared" ref="infrared" class="infrared" marginwidth="0" marginheight="0"
                            control="" scrolling="auto" :src="currentAdvices[1].src" loading="lazy" />
                    </div>
                    <div class="body-content-bottom-right-table">
                        <div class="table-title">
                            <div class="info-btn">
                                <el-button :class="currentInfoDisplay ? 'btn-display' : ''"
                                    @click="displayList(1)">实时信息</el-button>
                                <el-button :class="equipmentAlarmDisplay ? 'btn-display' : ''"
                                    @click="displayList(2)">设备告警</el-button>
                                <el-button :class="systemAlarmDisplay ? 'btn-display' : ''"
                                    @click="displayList(3)">系统告警</el-button>
                            </div>
                        </div>
                        <div class="body-content-bottom-right-list">
                            <div v-show="currentInfoDisplay" class="list-table">
                                <el-table :data="currentInfoData" style="width: 100%;">
                                    <el-table-column type="index" label="序号" width="80" />
                                    <el-table-column prop="patrolTime" label="巡视时间" width="180" />
                                    <el-table-column prop="devicePointName" label="巡视点名称" width="180" />
                                    <el-table-column prop="patrolValue" label="巡视值" />
                                    <el-table-column prop="alarmLevelName" label="告警等级">
                                        <template slot-scope="scope">
                                            <span
                                                :style="{ color: scope.row.alarmLevel == '0' ? '' : 'rgba(224, 57, 45, 1)' }">
                                                {{ scope.row.alarmLevelName }}
                                            </span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="recognitionTypeName" label="识别类型" />
                                    <el-table-column label="操作" class="end-column">
                                        <template slot-scope="scope">
                                            <el-button type="text" size="small" @click="handleQuery(scope.row)"><span
                                                    style="color: rgba(0, 255, 255, 1);">查看</span></el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                            <div v-show="equipmentAlarmDisplay" class="list-table">
                                <el-table :data="equipmentAlarmData" style="width: 100%;">
                                    <el-table-column type="index" label="序号" width="80" />
                                    <el-table-column prop="robotName" label="机器人名称" width="120" />
                                    <el-table-column prop="patrolTime" label="巡视时间" width="180" />
                                    <el-table-column prop="devicePointName" label="巡视点名称" width="180" />
                                    <el-table-column prop="patrolValue" label="巡视值" />
                                    <el-table-column prop="alarmLevelName" label="告警等级" />
                                    <el-table-column prop="recognitionTypeName" label="识别类型" />
                                    <el-table-column label="操作" class="end-column">
                                        <template slot-scope="scope">
                                            <el-button type="text" size="small" @click="handleQuery(scope.row)"><span
                                                    style="color: rgba(0, 255, 255, 1);">查看</span></el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                            <div v-show="systemAlarmDisplay" class="list-table">
                                <el-table :data="systemAlarmData" style="width: 100%;">
                                    <el-table-column type="index" label="序号" width="80" />
                                    <el-table-column prop="robotName" label="机器人名称" />
                                    <el-table-column prop="alarmTime" label="告警时间" />
                                    <el-table-column prop="alarmType" label="告警类型" />
                                    <el-table-column prop="alarmLevelName" label="告警等级" />
                                    <el-table-column prop="alarmInfo" label="告警信息" />
                                    <!-- <el-table-column label="操作" class="end-column">
                                        <template slot-scope="scope">
                                            <el-button type="text" size="small" @click="handleQuery(scope.row)"><span
                                                    style="color: rgba(0, 255, 255, 1);">查看</span></el-button>
                                        </template>
                                    </el-table-column> -->
                                </el-table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog class="operator-dialog" title="提示" :visible.sync="dialogVisible" width="30%"
            :before-close="closeDialog">
            <i class="el-icon-warning"></i><span>{{ taskTipInfo }}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    data() {
        return {
            websocket: null,
            stations: [],
            station: null,
            robots: [],
            robot: null,
            stationAreaCode: null,
            mapUrl: null,
            currentInfoDisplay: true,
            equipmentAlarmDisplay: false,
            systemAlarmDisplay: false,
            currentInfoData: [],
            equipmentAlarmData: [],
            systemAlarmData: [],
            currentAdvices: [{}, {}],
            limit: 10,
            dialogVisible: false,
            optCode: null,
            taskTipInfo: '',
            taskCount: {
                taskName: "--",
                currentDevicePoint: "--",
                taskStatusName: "--",
                allCount: 0,
                pointCount: 0,
                alarmCount: 0
            },
            robotCommonRealData: {
                robotState: "空闲",
                batteryPercent: 0
            },
            intervalId: null
        }
    },
    methods: {
        localSocket() {
            let Gz_security_token = this.$store.getters.Gz_security_token
            let url = 'ws://'.concat(this.$store.getters.serverUrl, '/station/websocket/socketServer/').concat(Gz_security_token)
            this.websocket = new WebSocket(url)

            this.websocket.onopen = () => {
                console.log('websocket连接成功')
                // 心跳检测
                this.intervalId = setInterval(() => {
                    this.websocket.send('心跳检测')
                }, 30000)
                this.websocket.send(JSON.stringify({
                    moduleNameList: ['taskCount', 'position', 'robotCommonRealData', 'realTimeInfo'],
                    moduleFlags: {
                        robotIp: this.robots.filter(item => item.robotCode == this.robot)[0].robotIp,
                        robotCode: this.robot
                    }
                }))
            }

            this.websocket.onclose = () => {
                console.log('websocket连接关闭')
            }

            this.websocket.onerror = () => {
                console.log('websocket连接错误')
            }

            this.websocket.onmessage = event => {
                try {
                    const message = JSON.parse(event.data)
                    switch (message.moduleName) {
                        case 'taskCount':
                            console.log('taskCount', message.moduleData)
                            if (message.moduleData != null && message.moduleData.length > 0) {
                                this.taskCount = message.moduleData[0]
                            }
                            break

                        case 'position':
                            // console.log('position', message.moduleData)
                            break

                        case 'realTimeInfo':
                            console.log('realTimeInfo', message.moduleData)
                            if (message.moduleData != null && message.moduleData.length > 0) {
                                this.currentInfoData = message.moduleData.filter(item => item.robotCode == this.robot).concat(this.currentInfoData)
                                if (this.currentInfoData != null && this.currentInfoData.length > 10)
                                    this.currentInfoData = this.currentInfoData.slice(0, 10)
                            }
                            break

                        case 'deviceAlarmInfo':
                            console.log('deviceAlarmInfo', message.moduleData)
                            if (message.moduleData != null && message.moduleData.length > 0) {
                                this.equipmentAlarmData = message.moduleData.concat(this.equipmentAlarmData)
                                if (this.equipmentAlarmData != null && this.equipmentAlarmData.length > 10)
                                    this.equipmentAlarmData = this.equipmentAlarmData.slice(0, 10)
                            }
                            break

                        case 'robotAlarmInfo':
                            console.log('robotAlarmInfo', message.moduleData)
                            if (message.moduleData != null && message.moduleData.length > 0) {
                                this.systemAlarmData = message.moduleData.concat(this.systemAlarmData)
                                if (this.systemAlarmData != null && this.systemAlarmData.length > 10)
                                    this.systemAlarmData = this.systemAlarmData.slice(0, 10)
                            }
                            break

                        case 'robotCommonRealData':
                            // console.log('robotCommonRealData', message.moduleData)
                            if (message.moduleData != null && message.moduleData.length > 0) {
                                this.robotCommonRealData = message.moduleData[0]
                            }
                            break

                        default:
                            break
                    }
                    // console.log('websocket信息', message)
                } catch (error) {
                    console.error("数据类型转换失败,请联系管理员")
                }
            }
        },
        changeStation() {
            if (this.intervalId)
                clearInterval(this.intervalId)
            if (this.websocket)
                this.websocket.close()
            this.initData()
            this.currentInfoDisplay = true
            this.equipmentAlarmDisplay = false
            this.systemAlarmDisplay = false
            this.getRobotList()
        },
        changeRobot() {
            if (this.intervalId)
                clearInterval(this.intervalId)
            if (this.websocket)
                this.websocket.close()
            this.initData()
            this.stationAreaCode = this.robots.filter(item => item.robotCode == this.robot)[0].stationAreaCode
            this.getRobotInfo()
            this.getMapByMapCode()
            this.currentInfoDisplay = true
            this.equipmentAlarmDisplay = false
            this.systemAlarmDisplay = false
            this.getLastLimitRealTimeInfo()
            this.localSocket()
        },
        initData() {
            this.taskCount = {
                taskName: "--",
                currentDevicePoint: "--",
                taskStatusName: "--",
                allCount: 0,
                pointCount: 0,
                normalCount: 0
            }
            this.robotCommonRealData = {
                robotState: "空闲",
                batteryPercent: 0
            }
        },
        confirmDialog(value) {
            if (value == 'pause') {
                this.optCode = value
                this.taskTipInfo = '此操作将暂停任务，是否继续?'
                this.dialogVisible = true
            } else if (value == 'cancel') {
                this.optCode = value
                this.taskTipInfo = '此操作将取消任务，是否继续?'
                this.dialogVisible = true
            } else if (value == 'continue') {
                this.optCode = value
                this.taskTipInfo = '此操作将继续任务，是否继续?'
                this.dialogVisible = true
            } else if (value == 'back') {
                this.optCode = value
                this.taskTipInfo = '此操作将执行返航，是否继续?'
                this.dialogVisible = true
            }
        },
        closeDialog() {
            this.optCode = null
            this.taskTipInfo = ''
            this.dialogVisible = false
            this.$message({
                type: 'info',
                message: '已取消',
                duration: 3000
            })
        },
        cancel() {
            this.closeDialog()
        },
        confirm() {
            this.controlTask()
        },
        handleQuery(row) {
            console.log('处理查看')
            this.$router.push({
                path: '/szRobot/dashboard/dataReview',
                query: {
                    devicePointName: row.devicePointName,
                    patrolValue: row.patrolValue,
                    patrolTime: row.patrolTime,
                    recognitionState: row.recognitionState,
                    checkValue: row.checkValue,
                    alarmLevel: row.alarmLevel,
                    defectLevel: row.defectLevel,
                    taskRunCode: row.taskRunCode,
                    devicePointCode: row.devicePointCode,
                    masterId: this.station
                }
            })
        },
        displayList(value) {
            if (value == 1) {
                this.currentInfoDisplay = true
                this.equipmentAlarmDisplay = false
                this.systemAlarmDisplay = false
                this.getLastLimitRealTimeInfo()
            } else if (value == 2) {
                this.currentInfoDisplay = false
                this.equipmentAlarmDisplay = true
                this.systemAlarmDisplay = false
                this.getLastLimitDeviceAlarmInfo()
            } else if (value == 3) {
                this.currentInfoDisplay = false
                this.equipmentAlarmDisplay = false
                this.systemAlarmDisplay = true
                this.getLastLimitRobotAlarmInfo()
            }
        },
        getMasterList() {
            axios.post(`http://${this.$store.getters.serverUrl}/station/user/masterList`, null, {
                headers: {
                    Gz_security_token: this.$store.getters.Gz_security_token
                }
            }).then(({ data }) => {
                if (data.success) {
                    this.stations = data.data
                    if (this.stations != null && this.stations.length > 0)
                        this.station = this.stations[0].id
                }
            })
        },
        getRobotList() {
            axios.post(`http://${this.$store.getters.serverUrl}/station/robotManage/getRobotInfoList`, null, {
                params: {
                    stationAreaCode: null,
                    masterId: this.station
                },
                headers: {
                    Gz_security_token: this.$store.getters.Gz_security_token
                }
            }).then(({ data }) => {
                if (data.success) {
                    this.robots = data.data
                    if (this.robots != null && this.robots.length > 0) {
                        this.robot = this.robots[0].robotCode
                        this.stationAreaCode = this.robots[0].stationAreaCode
                        this.getRobotInfo()
                        this.getMapByMapCode()
                        this.getLastLimitRealTimeInfo()
                        this.localSocket()
                    }
                }
            })
        },
        getRobotInfo() {
            axios.post(`http://${this.$store.getters.serverUrl}/station/robotManage/getRobotInfoList`, null, {
                params: {
                    stationAreaCode: this.stationAreaCode,
                    masterId: this.station
                },
                headers: {
                    Gz_security_token: this.$store.getters.Gz_security_token
                }
            }).then(({ data }) => {
                if (data.success) {
                    if (data.data != null && data.data.length > 0) {
                        const hdUrl = data.data[0].hdUrl
                        const infraredUrl = data.data[0].infraredUrl
                        const webRtcIP = this.$store.getters.webRtcUrl
                        this.currentAdvices[0].src = `/static/video.html?data=${hdUrl}&serve=${webRtcIP}`
                        this.currentAdvices[1].src = `/static/video.html?data=${infraredUrl}&serve=${webRtcIP}`
                    }
                }
            })
        },
        getMapByMapCode() {
            axios.post(`http://${this.$store.getters.serverUrl}/station/patrolMap/getMapByMapCode`, null, {
                params: {
                    stationAreaCode: this.stationAreaCode,
                    masterId: this.station
                },
                headers: {
                    Gz_security_token: this.$store.getters.Gz_security_token
                }
            }).then(({ data }) => {
                if (data.success) {
                    if (data.data != null && data.data.sceneMap != null) {
                        this.mapUrl = 'http://' + this.$store.getters.serverUrl + data.data.sceneMap
                    } else {
                        this.mapUrl = null
                        this.$message({
                            type: 'error',
                            message: '当前机器人未绑定地图!',
                            duration: 3000
                        })
                    }
                }
            })
        },
        getLastLimitRealTimeInfo() {
            axios.post(`http://${this.$store.getters.serverUrl}/station/robotManage/getLastLimitRealTimeInfo`, null, {
                params: {
                    robotCode: this.robot,
                    limit: this.limit,
                    masterId: this.station
                },
                headers: {
                    Gz_security_token: this.$store.getters.Gz_security_token
                }
            }).then(({ data }) => {
                if (data.success) {
                    this.currentInfoData = data.data
                }
            })
        },
        getLastLimitDeviceAlarmInfo() {
            axios.post(`http://${this.$store.getters.serverUrl}/station/robotManage/getLastLimitDeviceAlarmInfo`, null, {
                params: {
                    limit: this.limit,
                    masterId: this.station
                },
                headers: {
                    Gz_security_token: this.$store.getters.Gz_security_token
                }
            }).then(({ data }) => {
                if (data.success) {
                    this.equipmentAlarmData = data.data
                }
            })
        },
        getLastLimitRobotAlarmInfo() {
            axios.post(`http://${this.$store.getters.serverUrl}/station/robotManage/getLastLimitRobotAlarmInfo`, null, {
                params: {
                    limit: this.limit,
                    masterId: this.station
                },
                headers: {
                    Gz_security_token: this.$store.getters.Gz_security_token
                }
            }).then(({ data }) => {
                if (data.success) {
                    this.systemAlarmData = data.data
                }
            })
        },
        controlTask() {
            axios.post(`http://${this.$store.getters.serverUrl}/station/robotControl/controlTask`, null, {
                params: {
                    optCode: this.optCode,
                    robotIp: this.robots.filter(item => item.robotCode == this.robot)[0].robotIp
                },
                headers: {
                    Gz_security_token: this.$store.getters.Gz_security_token
                }
            }).then(({ data }) => {
                if (data.success) {
                    this.optCode = null
                    this.taskTipInfo = ''
                    this.dialogVisible = false
                    this.$message({
                        message: '操作成功!',
                        type: 'success',
                        duration: 3000
                    })
                } else {
                    this.$message({
                        message: data.msg,
                        type: 'error',
                        duration: 3000
                    })
                }
            }).catch(() => {
                this.$message({
                    message: '操作失败!',
                    type: 'error',
                    duration: 3000
                })
            })
        }
    },
    mounted() {
        this.getMasterList()
        this.getRobotList()
    },
    beforeDestroy() {
        if (this.intervalId)
            clearInterval(this.intervalId)
        if (this.websocket)
            this.websocket.close()
    },
}
</script>
<style scoped>
.body {
    margin-left: 20px;
    width: 1876px;
    height: 940px;
    background: rgba(1, 55, 66, 1);
    border: 1px solid rgba(0, 188, 191, 1);
    box-shadow: inset 20px 0px 35px -9px rgba(6, 115, 115, 1);

    .el-dialog {
        background: rgba(52, 65, 86, 1) !important;

        .el-dialog__header {
            background: linear-gradient(90deg, rgba(0, 255, 255, 0.4) 0%, rgba(13, 128, 236, 0) 100%);

            .el-dialog__title {
                font-size: 20px;
                font-weight: 700;
                color: rgba(0, 255, 255, 1);
            }
        }

        .el-dialog__body {
            text-align: center;
            font-size: 20px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);

            .el-icon-warning {
                color: rgba(0, 255, 255, 1);
                margin-right: 5px;
            }
        }

        .el-dialog__footer {
            text-align: center;
            padding-top: 0;

            .el-button--default {
                border-radius: 2px;
                background: rgba(80, 211, 225, 0.5);
                box-shadow: inset 0px 0px 4px rgba(80, 211, 225, 0.25);
                border: none;
                font-size: 16px;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
            }

            .el-button--primary {
                border-radius: 2px;
                background: linear-gradient(180deg, rgba(52, 213, 235, 1) 0%, rgba(12, 150, 168, 1) 100%);
                border: none;
                font-size: 16px;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
            }
        }
    }
}

.body-top {
    height: 56px;
    background: rgba(80, 211, 225, 0.15);
    display: flex;
    align-items: center;
}

.body-top-title {
    margin-left: 20px;

    .el-input__prefix {
        display: flex;
        align-items: center;
        font-size: 22px;
        font-weight: 500;
        color: rgba(223, 238, 243, 1);
    }

    .el-input__inner {
        padding-bottom: 2px;
        padding-left: 70px;
        width: 180px;
        font-size: 22px;
        font-weight: 500;
        letter-spacing: 1px;
        background: none;
        border: none;
        color: rgba(223, 238, 243, 1);
    }

    .el-select-dropdown {
        background: rgba(7, 131, 140, 1);
        border: 1px solid rgba(7, 131, 140, 1);
    }

    .el-select-dropdown__item {
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 1px;
        background: rgba(7, 131, 140, 1);
        color: rgba(223, 238, 243, 1);
    }

    .el-select-dropdown__item:hover {
        background: rgba(17, 173, 240, 0.1);
        border: 1px solid rgba(17, 173, 240, 0.2);
        box-shadow: inset 0px 0px 9.34px rgba(0, 153, 255, 0.5);
        font-size: 20px;
    }

    .el-select-dropdown__item.selected {
        color: #409EFF;
    }
}

.body-content-top {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
    color: rgba(0, 255, 255, 1);
}

.body-content-top-left {
    display: flex;
    align-items: center;
    height: 60px;
    width: 820px;
    margin: 16px 20px;
    padding-left: 57px;
    background: linear-gradient(90deg, rgba(0, 255, 255, 0.4) 0%, rgba(13, 128, 236, 0) 100%);
    letter-spacing: 4px;
}

.body-content-top-right {
    display: flex;
    align-items: center;
    height: 60px;
    width: 1000px;
    margin-top: 16px;
    margin-bottom: 20px;
    padding-left: 57px;
    background: linear-gradient(90deg, rgba(0, 255, 255, 0.4) 0%, rgba(13, 128, 236, 0) 100%);
    letter-spacing: 4px;
}

.body-content-bottom {
    display: flex;
    width: 1840px;
    height: 776px;
    margin-left: 20px;

    .el-divider--horizontal {
        height: 1px;
        background: linear-gradient(270deg, rgba(166, 246, 255, 0) 0%, rgba(135, 135, 135, 0.5) 49.31%, rgba(9, 231, 255, 0) 100%);
        display: block;
        margin: 10px 0;
    }
}

.body-content-bottom-left {
    width: 820px;
    height: 776px;

    .robot-info {
        float: left;
        width: 400px;
        height: 365px;
        border-radius: 4px;
        background: rgba(13, 79, 90, 1);

        .robot {
            margin: 17px 15px 0 15px;
            font-size: 16px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);

            .el-input__prefix {
                width: 64px;
                height: 100%;
                display: flex;
                align-items: center;
                margin-left: 10px;
                font-size: 16px;
                font-weight: 500;
                color: rgba(166, 166, 166, 1);
                border: none;
            }

            .el-input__inner {
                font-size: 16px;
                width: 370px;
                height: 48px;
                font-weight: 500;
                letter-spacing: 1px;
                padding-left: 80px;
                padding-bottom: 2px;
                color: rgba(255, 255, 255, 1);
                border: none;
                background: rgba(209, 209, 209, 0.15);
                box-shadow: inset 0px 0px 4px rgba(80, 211, 225, 0.25);
            }

            .el-select-dropdown {
                background: rgba(7, 131, 140, 1);
                border: 1px solid rgba(7, 131, 140, 1);
            }

            .el-select-dropdown__item {
                font-size: 16px;
                font-weight: 500;
                letter-spacing: 1px;
                background: rgba(7, 131, 140, 1);
                color: rgba(255, 255, 255, 1);
            }

            .el-select-dropdown__item:hover {
                background: rgba(17, 173, 240, 0.1);
                border: 1px solid rgba(17, 173, 240, 0.2);
                box-shadow: inset 0px 0px 9.34px rgba(0, 153, 255, 0.5);
            }

            .el-select-dropdown__item.selected {
                color: #409EFF;
            }
        }

        .level {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 24px auto;
            width: 187.5px;
            height: 187.5px;
            border-radius: 50%;

            .level-text {
                position: absolute;
                font-size: 24px;
                font-weight: 700;
                color: rgba(35, 255, 252, 1);
            }
        }

        .operation-btn {
            .el-button {
                width: 80px;
                height: 36px;
                margin-left: 16px;
                font-size: 16px;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
                border-radius: 2px;
                background: rgba(80, 211, 225, 0.5);
                border: 1px solid rgba(90, 144, 153, 1);
                box-shadow: inset 0px 0px 4px rgba(80, 211, 225, 0.25);
            }
        }
    }

    .patrol-info {
        float: right;
        width: 410px;
        height: 365px;
        margin-left: 10px;
        border-radius: 4px;
        background: rgba(13, 79, 90, 1);

        .el-divider--horizontal {
            height: 1px;
            background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(135, 135, 135, 0.5) 49.31%, rgba(255, 255, 255, 0) 100%);
            display: block;
            margin: 0;
        }

        .patrol-chart {
            display: flex;
            position: relative;
            width: 370px;
            height: 213px;
            margin: 0 15px;

            .patrol {
                margin-top: 50px;
                height: 114px;
                text-align: center;

                .patrol-toatl {
                    font-size: 24px;
                    font-weight: 700;
                    color: rgba(35, 255, 252, 1);
                }

                .patrol-count {
                    font-size: 24px;
                    font-weight: 700;
                    color: rgba(255, 218, 48, 1);
                }

                .patrol-exception {
                    font-size: 24px;
                    font-weight: 700;
                    color: rgba(35, 255, 252, 1);
                }


                .patrol-title {
                    display: block;
                    width: 120px;
                    margin-bottom: 8px;
                    font-size: 16px;
                    font-weight: 400;
                    color: rgba(204, 214, 214, 1);
                }

                .patrol-point-total {
                    width: 80px;
                    height: 57px;
                    position: absolute;
                    z-index: 2;
                    left: 27px;
                }

                .patrol-point-count {
                    width: 80px;
                    height: 57px;
                    position: absolute;
                    z-index: 2;
                    left: 147px;
                }

                .patrol-exception-count {
                    width: 80px;
                    height: 57px;
                    position: absolute;
                    z-index: 2;
                    left: 267px;
                }
            }


            .base {
                position: absolute;
                bottom: 27px;
                width: 370px;
                height: 64px;
                z-index: 1;
            }
        }

        .patrol-text {
            width: 370x;
            height: 151px;
            margin: 0 15px;

            .patrol-content {
                font-size: 14px;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
                margin-top: 25px;

                .patrol-value {
                    float: right;
                }
            }
        }
    }

    .map-title {
        display: flex;
        align-items: center;
        height: 60px;
        width: 820px;
        background: linear-gradient(90deg, rgba(0, 255, 255, 0.4) 0%, rgba(13, 128, 236, 0) 100%);
        font-size: 22px;
        font-weight: 700;
        color: rgba(0, 255, 255, 1);
        margin-top: 15px;
        margin-bottom: 10px;
        padding-left: 57px;
        letter-spacing: 4px;
    }

    .map-img {
        width: 820px;
        height: 340px;

        img {
            width: 100%;
            height: 100%;
        }
    }
}

.body-content-bottom-right {
    width: 1000px;
    height: 776px;
    margin-left: 20px;

    .body-content-bottom-right-video {
        background: rgba(13, 79, 90, 1);
        width: 100%;
        height: 460px;
        padding: 15px 20px;

        .light {
            width: 475px;
            height: 430px;
            border: 1px solid rgba(25, 236, 255, 1);
        }

        .infrared {
            margin-left: 10px;
            width: 475px;
            height: 430px;
            border: 1px solid rgba(25, 236, 255, 1);
        }
    }

    .body-content-bottom-right-table {
        width: 100%;
        background: rgba(13, 79, 90, 1);
        margin-top: 10px;

        .table-title {
            width: 100%;
            background: rgba(80, 211, 225, 0.15);

            .info-btn {
                width: 308px;
                display: flex;
                padding: 20px 0 0 0;
                margin-left: 20px;
                border-bottom: 1px solid rgba(135, 135, 135, 0.5);

                .el-button {
                    width: 96px;
                    height: 36px;
                    border-radius: 6px;
                    border: 1.6px solid undefined;
                    background: rgba(80, 211, 225, 0.15);
                    font-size: 14px;
                    font-weight: 400;
                    color: rgba(255, 255, 255, 1);
                    border-bottom: none;
                }

                .btn-display {
                    display: flex;
                    justify-content: center;
                    border: none;
                    background: rgba(3, 115, 107, 1);
                    font-size: 16px;
                    font-weight: 700;
                    border-radius: 6px 6px, 0px, 0px;
                }
            }
        }

        .body-content-bottom-right-list {
            background: rgba(13, 79, 90, 1);
            margin-top: 10px;
            width: 1000px;
            height: 240px;
            overflow-y: auto;
            -ms-overflow-style: none;
            scrollbar-width: none;

            .list-table {
                margin-left: 15px;

                .el-table {
                    background: rgba(13, 79, 90, 1);
                    margin-top: 10px;
                }

                .el-table .el-table__row {
                    height: 36px;
                }

                .el-table th {
                    text-align: center;
                    font-size: 14px;
                    font-weight: 500;
                    color: rgba(229, 229, 229, 1);
                    background: rgba(13, 79, 90, 1);
                    border: none;
                }

                .el-table td {
                    text-align: center;
                    font-size: 14px;
                    font-weight: 500;
                    color: rgba(229, 229, 229, 1);
                    background: rgba(13, 79, 90, 1);
                    border: none;
                }

                .el-table::before {
                    background: none;
                }

                .end-column::before {
                    background: none;
                }

                .el-button {
                    font-size: 14px;
                    font-weight: 500;
                    color: rgba(229, 229, 229, 1);
                }

                .el-button:hover {
                    cursor: pointer;
                }

                .el-table__fixed::before,
                .el-table__fixed-right::before {
                    background: none;
                }

                .el-table__body tr:hover>td {
                    background: rgba(52, 59, 69, 1);
                }

                .el-table--medium th,
                .el-table--medium td {
                    padding: 2px 0;
                }
            }
        }

        .body-content-bottom-right-list::-webkit-scrollbar {
            display: none;
        }
    }

}
</style>
